<!DOCTYPE html>
<!--<html>-->
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta charset="UTF-8">
		<title>编辑笔记</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="/layui.all.js"></script>
		<script type="text/javascript" src="editor/HandyEditor.min.js"></script>
		<link rel="stylesheet" href="/css/layui.css" />
		<link href="/css/Global.css" rel="stylesheet" type="text/css" media="all" />
	</head>

	<body style="">
				<div class="layui-layout" style="">
	
			<div class="layui-side layui-bg-black" style="overflow-x: visible;">
				<div th:include="/common/common::header"></div>

				<div class="layui-side-scroll">
					<ul class="layui-nav layui-nav-tree site-demo-nav">
						<li class="layui-nav-item ">
							<a class="layui-icon layui-icon-home"  href="/zhl/index.html" style="font-size: 14px">&nbsp;首页</a>
						</li>

						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-group" href="/zhl/user.html" style="font-size: 14px">&nbsp;用户管理</a>
						</li>
						<li class="layui-nav-item  layui-this">
							<a class="layui-icon layui-icon-read" href="/zhl/article.html" style="font-size: 14px">&nbsp;笔记管理</a>
						</li>
						<li class="layui-nav-item">
							<a class="layui-icon layui-icon-headset" style="font-size: 14px" href="/zhl/music.html">&nbsp;音乐管理</a>
						</li>
						<li class="layui-nav-item" style="height: 30px; text-align: center"></li>
						<span class="layui-nav-bar" style="top: 67.5px; height: 0px; opacity: 0;"></span>
					</ul>

				</div>
			</div>
			
			<div class="layui-body site-demo">
				<div class="layui-layout layui-layout-admin">
					<div class="layui-header">
						<ul class="layui-nav layui-layout-left">
							<li class="layui-nav-item">
								<a href="hard.html"><i class="layui-icon layui-icon-chart-screen layui-ico"></i>用户硬件信息</a>
							</li>
							<li class="layui-nav-item">
								<a href="user.html"><i class="layui-icon layui-icon-group layui-ico"></i>第三方登陆</a>
							</li>
						</ul>
						<ul class="layui-nav layui-layout-right">
							<li class="layui-nav-item">
								<a href="javascript:;">
									&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<i class="layui-icon layui-icon-set-fill layui-ico"></i>
								</a>
								<dl class="layui-nav-child">
									<dd><a href="">设置</a></dd>
									<dd><a href="">退出</a></dd>
								</dl>
							</li>
						</ul>
					</div>
				</div>
				<div class="layui-container" style="margin-top: 30px;">
					<div class="layui-row">
						<form class="layui-form" action="" lay-filter="example">
							<div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
								<div class="layui-form-item" style="width: 300px;">
									<label class="layui-form-label">标&nbsp;&nbsp;&nbsp;&nbsp;题</label>
									<div class="layui-input-block">
										<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">发&nbsp;&nbsp;&nbsp;&nbsp;表</label>
									<div class="layui-input-block">
										<input type="checkbox" name="close" lay-skin="switch" lay-text="发表|保存">
									</div>
								</div>
								<div class="layui-form-item">
									<label class="layui-form-label">来&nbsp;&nbsp;&nbsp;&nbsp;源</label>
									<div class="layui-input-block">
										<input type="radio" name="isOriginal" value="原创" title="原创" checked="">
										<input type="radio" name="isOriginal" value="转载" title="转载">
									</div>
								</div>
								<div class="layui-form-item" style="width: 300px;">
									<label class="layui-form-label">类&nbsp;&nbsp;&nbsp;&nbsp;型</label>
									<div class="layui-input-block">
										<select name="articleType" lay-filter="aihao">
											<option value=""></option>
											<option value="0">生活点滴</option>
											<option value="1">技术分享</option>
											<option value="2">更新公告</option>
										</select>
									</div>
								</div>
								<div class="layui-form-item" style="width: 300px;">
									<label class="layui-form-label">音&nbsp;&nbsp;&nbsp;&nbsp;乐</label>
									<div class="layui-input-block">
										<select name="articleType" lay-filter="aihao">
											<option value="0">逆流成河-匿名</option>
											<option value="1">千里之外-周杰伦</option>
											<option value="2">更新公告</option>
										</select>
									</div>
								</div>
							</div>

							<div class="layui-col-xs12 layui-col-sm4 layui-col-md6 layui-col-md-offset2">
								<div class="layui-form-item" style="width: 300px;">

									<label class="layui-form-label">封&nbsp;&nbsp;&nbsp;&nbsp;面</label>
									<img width="300px" id="cover" height="200px" style="margin-left: 110px;" />

									<input type="text" name="cover" class="cover" hidden="hidden" />
								</div>
							</div>

							<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
								<div class="layui-form-item" style="width: 98%;">
									<label class="layui-form-label">描&nbsp;&nbsp;&nbsp;&nbsp;述</label>
									<div class="layui-input-block">
										<input type="text" name="synopsis" placeholder="请输入描述" autocomplete="off" class="layui-input">
									</div>
								</div>
								<div class="layui-form-item layui-form-text">
									<label class="layui-form-label">正&nbsp;&nbsp;&nbsp;&nbsp;文</label>
									<div class="layui-input-block">
										<textarea placeholder="请输入内容" class="layui-textarea" id="editor"  name="content" style="width: 98%;"><span id="editor" ></span></textarea>
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-input-block">
										<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
									</div>
								</div>
							</div>
						</form>
					</div>
				</div>

			</div>
			<div class="site-tree-mobile layui-hide">
				<i class="layui-icon">&#xe602;</i>
			</div>
			<script>
				function getQueryString(name) {
					var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
					var r = window.location.search.substr(1).match(reg);
					if(r != null) {
						return unescape(r[2]);
					}
					return null;
				}
				layui.use(['form', 'layedit', 'laydate'], function() {
					var form = layui.form,
						layer = layui.layer,
						layedit = layui.layedit,
						laydate = layui.laydate;

					//日期
					laydate.render({
						elem: '#date'
					});
					laydate.render({
						elem: '#date1'
					});

					//创建一个编辑器
					var editIndex = layedit.build('LAY_demo_editor');

					//自定义验证规则
					form.verify({
						title: function(value) {
							if(value.length < 5) {
								return '标题至少得5个字符啊';
							}
						},
						pass: [/(.+){6,12}$/, '密码必须6到12位'],
						content: function(value) {
							layedit.sync(editIndex);
						}
					});

					//监听指定开关
					form.on('switch(switchTest)', function(data) {
						layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
							offset: '6px'
						});
						layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
					});

					//监听提交
					form.on('submit(demo1)', function(data) {
						layer.alert(JSON.stringify(data.field), {
							title: '最终的提交信息'
						})
						return false;
					});

					$.ajax({
						type: "get",
						url: "https://localhost:28080/api/article?id=" + getQueryString("id"),
						dataType:"json",
						success: function(result) {
							var data = result.data;
							form.val('example', {

								"title": result.data.title // "name": "value"
									,
								"music": "123456",
								"articleType": 1,
								"cover": function() {
									$("#cover").attr("src", data.cover)
									$(".cover").val("/day_02/images/banner_bg_1.jpg")
								},
								"isOriginal": "转载",

								"content": data.content

							})
								$("#editor").html(data.content);
							
						}
					});

					//表单初始赋值

				});
			</script>
			<script>
				$(function() {
					$(".site-tree-mobile").click(function() {
						$("body").addClass("site-mobile");
						$(".site-mobile-shade").click(function() {
							$("body").removeClass("site-mobile");
						});
					});
				});
			</script>
			<script>
				var he = HE.getEditor('editor', {
					width: '98%',
					height: '300px',
					autoHeight: true,
					autoFloat: false,
					topOffset: 0,
					uploadPhoto: true,
					uploadPhotoHandler: 'php/uploadPhoto.php',
					uploadPhotoSize: 0,
					uploadPhotoType: 'gif,png,jpg,jpeg',
					uploadPhotoSizeError: '不能上传大于××KB的图片',
					uploadPhotoTypeError: '只能上传gif,png,jpg,jpeg格式的图片',
					lang: 'zh-jian',
					skin: 'HandyEditor',
					externalSkin: '',
					item: ['bold', 'italic', 'strike', 'underline', 'fontSize', 'fontName', 'paragraph', 'color', 'backColor',
						'center', 'left', 'right', 'full', 'indent', 'outdent',
						'link', 'code', 'textBlock', 'image', 'expression', 'subscript', 'superscript', 'horizontal', 'orderedList', 'unorderedList'
					]
				});
			</script>
	</body>

</html>